<template>
    <u-navbar
        title="闲置详情"
        autoBack
        placeholder
        height="44px"
    >
    </u-navbar>
    <view class="app-container" style="padding-bottom: 200rpx;">
        <view class="referral mb26">
            <view class="justify-between mb26">
                <view class="align-center">
                    <up-image src="https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b" width="80rpx" height="80rpx" shape="circle"></up-image>
                    <text class="font28" style="margin-left: 28rpx;">微信用户</text>
                </view>
                <i class="iconfont icon-mianxinglianxifangshi" style="font-size: 55rpx; color: #F1F1F1;"></i>
            </view>
            <view class="light-red mb26">
                <text class="font20">￥</text>
                <text class="font36">79</text>    
            </view>
            <view class="font28 mb26 introduction">
                闲置介绍内容闲置介绍内容闲置介绍内容闲置介绍内容闲置介绍内容闲置介绍内容闲置介绍内容闲置介绍内容闲置介绍内容闲
            </view>
            <view class="label-block font20" style="margin-bottom: 36rpx;">
                <view class="label">体育器材</view>
                <view class="label">体育器材</view>
                <view class="label">体育器材</view>
            </view>
            <view>
                <view class="mb16">
                    <up-image src="https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b" width="100%" radius="16rpx"></up-image>
                </view>
                <view>
                    <up-image src="https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b" width="100%" radius="16rpx"></up-image>
                </view>
            </view>
        </view>
        <view>
            <view class="font28 weight mb26">评论 14</view>
            <view class="align-stretch" style="margin-bottom: 36rpx;" v-for="item in 10" :key="item">
                <up-image src="https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b" width="58rpx" height="58rpx" shape="circle"></up-image>
                <view class="ml16">
                    <view class="font24 weight mb16">开心小咖喱</view>
                    <view class="font28 mb16">外皮酥掉渣，内馅爆多汁！69元18片馅饼组合，几分钟就能吃。</view>
                    <view class="font22 justify-between mb16">
                        <view>2023-02-16   浙江</view>
                        <view class="align-center">
                            <view class="align-center" style="margin-right: 36rpx;"><i class="iconfont icon-pinglun"></i></view>
                            <view class="align-center"><i class="iconfont icon-dianzan mr8"></i> 10</view>
                        </view>
                    </view>
                    <view class="align-stretch" style="margin-bottom: 36rpx;" v-if="item % 2 !== 0">
                        <up-image src="https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b" width="58rpx" height="58rpx" shape="circle"></up-image>
                        <view class="ml16">
                            <view class="font24 weight mb20">开心小咖喱</view>
                            <view class="font28 mb16">外皮酥掉渣，内馅爆多汁！69元18片馅饼组合，几分钟就能吃。</view>
                            <view class="font22 justify-between mb16">
                                <view>2023-02-16   浙江</view>
                                <view class="align-center">
                                    <view class="align-center" style="margin-right: 36rpx;"><i class="iconfont icon-pinglun"></i></view>
                                    <view class="align-center"><i class="iconfont icon-dianzan mr8"></i> 10</view>
                                </view>
                            </view>
                            <view class="font28 purple text-underline">展开5条回复</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
    <view class="footer">
        <view class="text-center">
            <i class="iconfont icon-fenxiang"></i>
            <view class="font20 mt16">分享</view>
        </view>
        <view class="text-center">
            <i class="iconfont icon-pinglun"></i>
            <view class="font20 mt16">留言</view>
        </view>
        <view class="btn weight">想要</view>
    </view>
</template>

<script setup lang="ts">

</script>

<style scoped lang="scss">
.introduction {
    line-height: 50rpx;
}

.referral {
    padding-bottom: 26rpx;
    border-bottom: 1rpx solid #F5F5F5;
}

.label-block {
    display: flex;
    align-items: center;
    gap: 16rpx;
    .label {
        padding: 2rpx 12rpx;
        background: rgba(93,150,239,0.2);
        border: 1rpx solid #5D96EF;
        border-radius: 15rpx;
        color: #5D96EF;
    }
}


.footer {
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 36rpx 26rpx 70rpx 71rpx;
    background: #fff;
    box-shadow: 0rpx -3rpx 10rpx 1rpx rgba(196, 196, 196, 0.16);
    border-radius: 30rpx 30rpx 0 0;

    .btn {
        width: 380rpx;
        height: 80rpx;
        background: #966BFF;
        border-radius: 46rpx;
        text-align: center;
        line-height: 80rpx;
        font-size: 30rpx;
        color: #fff;

        &:active {
            background: rgba(0, 0, 0, .2);
        }
    }
}
</style>